<template>
  <div>
    <el-form>
      <div style="margin: 16px; font-size: 16px">
        <div class="row">
          1.送机人员在接到上客通知后到达指定机位,清点所携带工具。
        </div>

        <div class="row">
          S1：
          <div style="display: flex; flex-wrap: wrap; margin-top: 4px">
            <el-checkbox-group v-model="form.c1" :disabled="oneCheck">
              <el-checkbox label="1" style="margin-right: 12px" shape="square"
                >工具包(含清单所列工具)</el-checkbox
              >
              <el-checkbox label="2" style="margin-right: 12px" shape="square"
                >对讲机</el-checkbox
              >
              <el-checkbox label="3" style="margin-right: 12px" shape="square"
                >手电筒</el-checkbox
              >
              <el-checkbox label="5" style="margin-right: 12px" shape="square"
                >其他&nbsp;</el-checkbox
              >
              <el-input
                v-model="form.c1other"
                name="其他"
                v-if="c1Show"
                placeholder="其他"
                :rules="[{ required: true, message: '请填写其他' }]"
              />
            </el-checkbox-group>
          </div>
        </div>

        <div class="row">
          S2：
          <div style="display: flex; flex-wrap: wrap; margin-top: 4px">
            <el-checkbox-group v-model="form.c2" :disabled="oneCheck1">
              <el-checkbox label="1" style="margin-right: 12px" shape="square"
                >工具包(含清单所列工具)</el-checkbox
              >
              <el-checkbox label="2" style="margin-right: 12px" shape="square"
                >对讲机</el-checkbox
              >
              <el-checkbox label="3" style="margin-right: 12px" shape="square"
                >手电筒</el-checkbox
              >
              <el-checkbox label="4" style="margin-right: 12px" shape="square"
                >其他&nbsp;</el-checkbox
              >
              <el-input
                v-model="form.c2other"
                name="其他"
                v-if="c2Show"
                placeholder="其他"
                :rules="[{ required: true, message: '请填写其他' }]"
              />
            </el-checkbox-group>
          </div>
        </div>

        <div class="row">
          2.淮备耳机,建立空地通话,确认耳机工作正常。视情插好转弯旁通销{{
            form.boatNameInspect
          }}(旁通销类型),挂好拖把。
        </div>

        <el-input
          v-model="form.boatNameInspect"
          name="用户名"
          placeholder="请输入通销类型"
        />
        <div class="row">
          3.航前及排故飞杌需确认各堵头、起落架安全销等已取净。
        </div>

        <div class="row">
          C1：
          <div style="display: flex; flex-wrap: wrap; margin-top: 4px">
            <el-checkbox-group v-model="form.c3">
              <el-checkbox label="1" style="margin-right: 12px" shape="square"
                >航前</el-checkbox
              >
              <el-checkbox label="2" style="margin-right: 12px" shape="square"
                >排故</el-checkbox
              >
              <el-checkbox label="3" style="margin-right: 12px" shape="square"
                >短停</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>

        <div class="row">4.发动机启动完毕后,取下耳机,盖好盖板。</div>

        <div style="display: flex; flex-wrap: wrap; margin-top: 4px">
          <el-checkbox-group v-model="form.d4">
            <el-checkbox label="1" style="margin-right: 12px" shape="square"
              >是</el-checkbox
            >
            <el-checkbox label="2" style="margin-right: 12px" shape="square"
              >否</el-checkbox
            >
          </el-checkbox-group>
        </div>

        <div class="row">5.送机结束后,离开时清点工具与第1条所携带的一致。</div>

        <div class="row">
          S1：
          <div style="display: flex; flex-wrap: wrap; margin-top: 4px">
            <el-checkbox-group v-model="form.c4" :disabled="oneCheck2">
              <el-checkbox label="1" style="margin-right: 12px" shape="square"
                >一致</el-checkbox
              >
              <el-checkbox label="2" style="margin-right: 12px" shape="square"
                >不一致&nbsp;{{ this.form.c4other }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
        <div class="row">
          S2：
          <div style="display: flex; flex-wrap: wrap; margin-top: 4px">
            <el-checkbox-group v-model="form.c5" :disabled="oneCheck3">
              <el-checkbox label="1" style="margin-right: 12px" shape="square"
                >一致</el-checkbox
              >
              <el-checkbox label="2" style="margin-right: 12px" shape="square"
                >不一致&nbsp;{{ this.form.c5other }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
      </div>
        <div style="padding: 20px;">
          <div class="row">
        工作者：
        <el-input
          v-model="form.n1"
          name="n1"
          disabled
          placeholder="请输入工作者"
        />
      </div>
      <div class="row">
        审核者：
        <el-input v-model="form.n2" name="n2" disabled placeholder="-" />
      </div>
        </div>
      
    </el-form>
    <div style="padding: 20px;">
      <el-button block type="primary" @click="onSubmit"> 提交 </el-button>
    </div>
  </div>
</template>
<script>
import { edit, toExamine, queryById } from "@/api/airport/outfield";
import { oauthUser, queryString, getLoginInfo } from "@/api/wcLogin";
export default {
  computed: {
    c1Show() {
      return this.form.c1.indexOf("5") !== -1;
    },
    c2Show() {
      return this.form.c2.indexOf("5") !== -1;
    },
    c3Show() {
      return this.form.c4.indexOf("0") !== -1;
    },
    c4Show() {
      return this.form.c5.indexOf("0") !== -1;
    },
    bolEdit() {
      return this.status !== 1 && this.status !== 2;
    },
  },
  watch: {
    "form.c1": {
      immediate: true,
      handler(val) {
        const len1 = this.form.c1.length,
          len2 = this.form.c2.length;
        if (this.bolTow) {
          if (len2) {
            this.oneCheck1 = true;
          }
        } else {
          if (len1 === 0) {
            this.oneCheck1 = false;
          }
          if (len1) {
            this.oneCheck1 = true;
          }
        }
      },
    },
    "form.c2": {
      immediate: true,
      handler(val) {
        const len1 = this.form.c1.length,
          len2 = this.form.c2.length;
        if (this.bolTow) {
          if (len1) {
            this.oneCheck = true;
          }
        } else {
          if (len2 === 0) {
            this.oneCheck = false;
          }
          if (len2) {
            this.oneCheck = true;
          }
        }
      },
    },

    "form.c4": {
      immediate: true,
      handler(val) {
        const len1 = this.form.c4.length,
          len2 = this.form.c5.length;
        if (this.bolTow1) {
          if (len2) {
            this.oneCheck3 = true;
          }
        } else {
          if (len1 === 0) {
            this.oneCheck3 = false;
          }
          if (len1) {
            this.oneCheck3 = true;
          }
        }
      },
    },
    "form.c5": {
      immediate: true,
      handler(val) {
        const len1 = this.form.c4.length,
          len2 = this.form.c5.length;
        if (this.bolTow1) {
          if (len1) {
            this.oneCheck2 = true;
          }
        } else {
          if (len2 === 0) {
            this.oneCheck2 = false;
          }
          if (len2) {
            this.oneCheck2 = true;
          }
        }
      },
    },
  },
  data() {
    return {
      showPicker: false,
      result: "",
      // 表单参数
      form: {
        boatNameInspect: "",

        d1: "",
        d2: "",
        d3: "",
        d4: [],

        c1: [],
        c1other: "",

        c2: [],
        c2other: "",

        c3: [],
        c3other: "",

        c4: [],
        c4other: "",

        c5: [],
        c5other: "",

        time: "",

        n1: "",
        n2: "",
      },
      routeParam: {},
      wxUser: undefined,
      status: "",
      oneCheck: false,
      oneCheck1: false,
      oneCheck2: false,
      oneCheck3: false,
      bolTow: false,
      bolTow1: false,
    };
  },
  created() {
    this.routeParam = this.$route.query;
    queryById({ id: this.$route.query.id }).then((res) => {
      this.bolTow = false;
      this.bolTow1 = false;
      const workerInspectTerm = res.data?.inspectTimestamp
        ? res.data.inspectTimestamp
        : 0;
      const reviewerInspectTerm = res.data?.reviewerTimestamp
        ? res.data.reviewerTimestamp
        : 0;
      this.status = res.data?.state ? res.data?.state : 0;
      let item = {};
      if (workerInspectTerm > reviewerInspectTerm) {
        item = res.data.workerInspectTerm;
      } else {
        item = res.data.reviewerInspectTerm;
      }
      if (item) {
        const l1 = item[0].content.c1.length,
          l2 = item[0].content.c2.length;
        const l3 = item[8].content.c4.length,
          l4 = item[8].content.c5.length;
        if (l1 !== 0 || l2 !== 0) {
          this.bolTow = true;
        }
        if (l3 !== 0 || l4 !== 0) {
          this.bolTow1 = true;
        }
        item.forEach((item) => {
          for (let i in item.content) {
            this.form[i] = item.content[i];
          }
        });
      }
      if (this.routeParam.source === "edit") {
        this.form.n1 = res.data.worker;
      }
      // this.form.n1 = res.data.worker;
      // this.form.n2 = res.data.reviewer;
    });
    const user = JSON.parse(sessionStorage.getItem("userInfo"));
    this.wxUser = user;
    if (this.routeParam.source === "edit") {
      this.form.n2 = user.nickName;
    } else {
      this.form.n1 = user.nickName;
    }
  },
  methods: {
    checkBoxOne(a) {
      if (a.length === 2) {
        a.shift();
      }
    },
    onConfirm({ selectedValues }) {
      this.form.time = selectedValues.join(":");
      this.showPicker = false;
    },
    otherC1(val) {
      this.form.c1other = "";
    },
    otherC2(val) {
      this.form.c2other = "";
    },
    onSubmit(values) {
      console.log(this.form);

      const inspect = [];
      inspect.push({
        index: 1,
        content: {
          c1: this.form.c1,
          c1other: this.form.c1other,

          c2: this.form.c2,
          c2other: this.form.c2other,
        },
      });

      inspect.push({
        index: 2,
        content: { boatNameInspect: this.form.boatNameInspect },
      });

      inspect.push({
        index: 3,
        content: {
          d1: this.form.d1,
        },
      });

      inspect.push({
        index: 4,
        content: {
          d2: this.form.d2,
        },
      });

      inspect.push({
        index: 5,
        content: {
          c3: this.form.c3,
          c3other: this.form.c3other,
        },
      });

      inspect.push({
        index: 6,
        content: { time: this.form.time },
      });

      inspect.push({
        index: 7,
        content: {
          d3: this.form.d3,
        },
      });

      inspect.push({
        index: 8,
        content: {
          d4: this.form.d4,
        },
      });

      inspect.push({
        index: 9,
        content: {
          c4: this.form.c4,
          c4other: this.form.c4other,

          c5: this.form.c5,
          c5other: this.form.c5other,
        },
      });
      const data = {
        inspectDTOS: inspect,
        id: this.$route.query.id,
        name: this.wxUser.nickName,
      };
      if (this.$route.query.source === "add") {
        edit(data).then((res) => {
          this.$router.push({ name: "Menu", replace: true });
        });
      } else if (this.$route.query.source === "edit") {
        toExamine(data).then((res) => {
          this.$router.push({ name: "Menu", replace: true });
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.row {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  overflow: hidden;
  color: var(--van-cell-font-size);
  font-size: var(--van-cell-font-size);

  &:after {
    position: absolute;
    box-sizing: border-box;
    content: "";
    right: var(--van-padding-md);
    bottom: 0;
    left: var(--van-padding-md);
    pointer-events: none;
    border-bottom: 1px solid var(--van-cell-border-color);
    transform: scaleY(0.5);
  }
}

.head {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
}

.bottom {
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
}

.mt46 {
  padding-bottom: 56px;
}
</style>
